import React, { Component } from "react";
import "./login.css";
import logo from "../../assets/images/logo.png";
import { Form, Input, Button, message } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { reqLogin } from "../../api";
import memoryUtils from "../../utils/memory";
import StorageUtils from "../../utils/localStorageUtils";

export default class Login extends Component {
  onFinish = async (values) => {
    console.log(values);
    const res = await reqLogin(values.username, values.password);
    console.log(res);
    if (res.status === 1) {
      message.error(res.msg, [2]);
      return;
    }
    memoryUtils.user = {
      username: res.data.username,
      _id: res.data._id,
    };
    StorageUtils.setUser({
      username: res.data.username,
      _id: res.data._id,
    });
    message.success("登录成功，正在为您跳转", [0.2], () => {
      this.props.history.replace("/");
    });
  };

  render() {
    if (memoryUtils.user && memoryUtils.user._id) {
      this.props.history.replace("/");
    }

    return (
      <div className="login">
        <div className="login-header">
          <img src={logo} alt="logo"></img>
          <h1>REACT项目：后台管理系统</h1>
        </div>
        <div className="login-content">
          <h1>用户登录</h1>
          <div>
            <Form
              name="normal_login"
              className="login-form"
              initialValues={{ remember: true }}
              onFinish={this.onFinish}
            >
              <Form.Item
                name="username"
                rules={[
                  {
                    min: 5,
                    max: 9,
                    message: "Please input Username in 5 ~ 9 !",
                  },
                  { required: true, message: "Please input your username!" },
                ]}
              >
                <Input
                  prefix={<UserOutlined className="site-form-item-icon" />}
                  placeholder="Username"
                />
              </Form.Item>
              <Form.Item
                name="password"
                rules={[
                  { required: true, message: "Please input your Password!" },
                  {
                    validator: (_, value) =>
                      /^[a-zA-Z0-9_-]{4,16}$/.test(value)
                        ? Promise.resolve()
                        : Promise.reject(
                            "请输入4到16位（字母，数字，下划线，减号）的密码！"
                          ),
                  },
                ]}
              >
                <Input
                  prefix={<LockOutlined className="site-form-item-icon" />}
                  type="password"
                  placeholder="Password"
                />
              </Form.Item>

              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  className="login-form-button"
                >
                  Log in
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    );
  }
}
